import { onMounted, ref } from "vue";
function useDraw() {
  const appRef = ref();
  const timer = ref(0);
  //基准宽度
  const width = 1920;
  //基准高度
  const height = 1080;
  //缩放宽度和高度比例
  const scale = {
    width: 1,
    height: 1,
  };
  //宽度和高度的基准比例，也称宽高比 1.777777
  const baseProeprty = parseFloat((width / height).toFixed(5));

  //处理dom缩放，使用transform:scale(x,y)  translate()
  //     onMounted(() => {

  //    })

  //计算比例
  const calc = () => {
    //实际的宽度和高度比例
    const currentProperty = parseFloat(
      (window.innerWidth / window.innerHeight).toFixed(5)
    );
    if (currentProperty > baseProeprty) {
      //更宽
      //宽度的比例？？
      scale.width = parseFloat(
        ((window.innerHeight * baseProeprty) / width).toFixed(5)
      );

      //高度的比例多少
      scale.height = parseFloat((window.innerHeight / height).toFixed(5));
    } else {
      //更窄
      scale.height = parseFloat(
        (window.innerWidth / baseProeprty / height).toFixed(5)
      );
      scale.width = parseFloat((window.innerWidth / width).toFixed(5));
    }
    appRef.value.style.transform = `scale(${scale.width},${scale.height}) translate(-50%,-50%)`;
  };

  //监听窗口大小改变
  const realCalc = () => {
    window.addEventListener("resize", calc, false);
  };

  //卸载监听的事件
  const unrealCalc = () => {
    window.removeEventListener("resize", calc, false);
  };

  return {
    appRef,
    realCalc,
    unrealCalc,
  };
}

export default useDraw;
